<template>
  <v-container class="page">
    <v-main class="page">
      <div class="page">
        <canvas id="screen" @mousemove="move"></canvas>
        <v-icon title="Toggle Menu" class="menuicon" @click="show = !show" >{{ icons.mdiMenu }}</v-icon>
      </div>
    </v-main>
    <Drawer :show="show" @change="updateProperties" />
    <v-snackbar
      v-model="snackbar"
    >
      {{tips}}
      <template v-slot:action="{ attrs }">
        <v-btn
          color="pink"
          text
          v-bind="attrs"
          @click="snackbar = false"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script>
import Drawer from './Drawer'
import {
  mdiMenu
} from '@mdi/js'
export default {
  name: 'Home',

  components: {
    Drawer
  },
  data () {
    return {
      show: false, // show Drawer
      url: null, // websocket url
      ws: null, // websocket connect
      connected: false, // is connect
      snackbar: false, // show tips
      tips: null, // tips message
      screen: null, // screen
      icons: { // icons
        mdiMenu
      }
    }
  },
  methods: {
    move: function (e) {
      console.log(`(${e.layerX}, ${e.layerY})`)
    },
    showTips: function (msg) {
      this.snackbar = true
      this.tips = msg
    },
    open: function () {
      console.log('connected')
      this.connected = true
      this.showTips('connected')
    },
    onmessage: function (evt) {
      const msg = JSON.parse(evt.data)
      console.log('receive:', msg)
      switch (msg.command) {
        case 'img':
          console.log(msg.args)
          // this.updateScreen(msg.args.image)
          break
        default:
          console.log('unknow:', msg)
      }
    },
    close: function () {
      this.connected = false
    },
    sendClose: function () {
      this.ws.close()
    },
    timer: function () {
      if (!this.connected) {
        this.initWS()
      }
    },
    initWS: function () {
      this.ws = new WebSocket(this.url)
      this.ws.onopen = this.open
      this.ws.onmessage = this.onmessage
      this.ws.onclose = this.close
      this.ws.onerror = this.close
    },
    updateProperties: function (values) {
      this.ws.send(JSON.stringify({
        name: 'previewer',
        command: 'updateProperties',
        args: values
      }))
    },
    initScreen: function () {
      const node = document.getElementById('screen')
      this.screen = node.getContext('2d')
    },
    updateScreen: function (image) {
      const img = new window.Image()
      img.src = image
      img.crossOrigin = '*'
      this.canvas.drawImage(img)
    }
  },
  created () {
    const loc = window.location
    let uri = 'ws:'
    if (loc.protocol === 'https:') {
      uri = 'wss:'
    }
    uri += '//' + loc.host
    uri += loc.pathname + 'ws'
    this.url = uri
  },
  mounted () {
    this.initScreen()
    window.οnbefοreunlοad = this.sendClose
    setInterval(this.timer, 10 * 1000)
  }
}
</script>

<style scoped lang="less">
  .page {
    height: 100%;
    width: 100%;
    .screen {
      height: 100%;
    }
    .geo {
      padding-left: 0;
    }
    .no-left-padding {
      padding-left: 0;
    }
    .menuicon {
      position: fixed;
      bottom: 10px;
      right: 20px;
      z-index: 100;
    }
    #screen {
      width: 100%;
      height: 100%;
    }
  }
</style>
